<template>
    <div>
        <div class="bottom-view">
            <myTitle title="集水井"></myTitle>
            <!-- <div style="margin: 20px 0px 0px 20px">
                <el-select
                    v-model="decvice"
                    placeholder=""
                    clearable
                    @change=""
                    size="mini"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div> -->

            <el-row :gutter="20">
                <el-col :span="14" :offset="0">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <leftEcharts
                                :data="autoData"
                                chatTitle="自动状态"
                                :chartColor="['#5087ec', '#68bbc4']"
                            ></leftEcharts>
                        </el-col>
                        <el-col :span="6">
                            <leftEcharts
                                :data="breakdownData"
                                chatTitle="故障状态"
                                :chartColor="['#f2991f', '#12c258']"
                            ></leftEcharts>
                        </el-col>
                        <el-col :span="6">
                            <leftEcharts
                                :data="startData"
                                chatTitle="启停控制"
                                :chartColor="['#2fd0ee', '#998f8f']"
                            ></leftEcharts>
                        </el-col>
                        <el-col :span="6">
                            <leftEcharts
                                :data="operationData"
                                chatTitle="运行状态"
                                :chartColor="['#2fd0ee', '#df5301']"
                            ></leftEcharts>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="10" :offset="0">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <rightChart
                                :data="highData"
                                chatTitle="高液位状态"
                                :chartColor="['#ffbf67', '#12c258']"
                            ></rightChart>
                        </el-col>
                        <el-col :span="12">
                            <rightChart
                                :data="lowData"
                                chatTitle="低液位状态"
                                :chartColor="['#998f8f', '#12c258']"
                            ></rightChart>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import myTitle from "../../components/title.vue";
import leftEcharts from "./leftEcharts.vue";
import rightChart from "./rightChart.vue";
import { getPropertyState } from "@/api/sendhttp/baKanban";
import pieJson from "./pie.json";
export default {
    components: { myTitle, leftEcharts, rightChart },
    name: "bottomView",
    data() {
        return {
            autoData: [],
            breakdownData: [],
            operationData: [],
            startData: [],
            highData: [],
            lowData: [],
            decvice: "选项1",
            options: [
                {
                    value: "选项1",
                    label: "黄金糕",
                },
                {
                    value: "选项2",
                    label: "双皮奶",
                },
                {
                    value: "选项3",
                    label: "蚵仔煎",
                },
                {
                    value: "选项4",
                    label: "龙须面",
                },
                {
                    value: "选项5",
                    label: "北京烤鸭",
                },
            ],
        };
    },
    created() {},
    mounted() {
        this.getCakeData();
    },
    methods: {
        async getCakeData() {
            const {
                data: { code, data, msg },
            } = await getPropertyState({ deviceType: "JSJ_JSJ" });
            console.log(pieJson);
            // const { code, data, msg } = pieJson;
            if (code === "200") {
                this.autoData = this.mapData(data, "自动状态");
                this.breakdownData = this.mapData(data, "故障状态");
                this.operationData = this.mapData(data, "运行状态");
                this.startData = this.mapData(data, "启停控制");
                this.highData = this.mapData(data, "高液位状态");
                this.lowData = this.mapData(data, "低液位状态");
            } else {
                this.$message({
                    message: msg,
                    type: "error",
                });
            }
        },
        mapData(data, key) {
            return data[key].map((item) => ({
                value: item.total,
                name: item.name,
            }));
        },
    },
};
</script>
<style lang="scss" scoped>
.bottom-view {
    height: 300px;
    background-color: rgba(241, 243, 245, 1);
}
/* @import url(); 引入css类 */
</style>
